<template>
    <div class="page-index income">
       <div class="header">
            <h1>帐单查询</h1>
            <span class="back" @click="back"></span>
        </div>
        <div class="search-click">
            <div class="row">
                <div class="left font-normal font-color-normal">
                    <span class="font-small font-color-shallow margin-r-20" @click="showPopupPicker = true">{{starttime}}</span>至
                    <span class="font-small font-color-shallow margin-l-20" @click="showPopupPicker2 = true">{{endtime}}</span>
                </div>
                <div class="right">
                    <x-button class="btn-blue" @click.native="search">查询</x-button>
                </div>
            </div>
            <h1 class="font-normal font-color-shallow">总收入：
                <span class="font-big font-color-normal">{{fee}}</span>&nbsp;元
            </h1>
        </div>
        <div style="padding:5px 10px;">
            <divider>收入明细</divider>
        </div>
        <b-scroll ref="bscroll" :top="top"  @load="load" :data="itemarr" :nomore="nomore">
            <div slot="scroll">
                <div class="income-list">
                    <ul>
                        <li v-for="item in itemarr">
                            <div class="item1">
                                <div class="left">
                                    <h1 class="font-normal font-color-normal">{{item.system_order_no}}</h1>
                                    <h1 class="font-small font-color-more-shallow">{{item.order_time}}</h1>
                                </div>
                                <div class="right">
                                    <h1 class="font-big font-color-normal">+{{item.deliver_fee}}</h1>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </b-scroll>
        
        <group>
        <popup-picker :show.sync="showPopupPicker" :show-cell="false" title="TEST" :data="pickdata" v-model="start"></popup-picker>
        </group>
        <group>
        <popup-picker :show.sync="showPopupPicker2" :show-cell="false" title="TEST" :data="pickdata" v-model="end"></popup-picker>
        </group>

        
    </div>
</template>

<script>
import { PopupPicker,Popup,PopupHeader, Group, Cell, Picker, XButton, Divider, XSwitch } from 'vux'
import bScroll from 'components/common/bScroll.vue'
export default {
    components: {
        PopupPicker,
        Group,
        Picker,
        XButton,
        Divider,
        Cell,
        XSwitch,
        Popup,
        PopupHeader,
        bScroll
    },
    data(){
        return{
            itemarr:[],
            fee:'xxx',
            top:'170',
            currentPage : 1,
            pagesize : 10,
            maxpage:0,
            nomore:false,
            starttime:'2017-10-01',
            endtime:'2017-10-31',
            start: ['2017','10','01'],
            end: ['2017','10','31'],
            showPopupPicker: false,
            showPopupPicker2: false,
            pickdata:[['2017','2018','2019','2020','2021','2022'],
                ['01','02','03','04','05','06','07','08','09','10','11','12'],
                ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15',
                '16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']]
        }
    },
    methods:{
        back(){
            this.$router.push({ path: '/mine' })
        },
        search(){
            let token = localStorage.getItem("access_token");
            let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"start_time":this.starttime,"end_time":this.endtime}
            this.ajaxplugin("/Deliver/finance",params,(res) => {
                this.itemarr = []
                console.log(res)
                if(res.result == "success"){
                    this.maxpage = res.data.total_page
                    this.fee = res.data.fee
                    let arr = res.data.order_list
                    this.loadmore = false;
                    for(let item of arr){
                        this.itemarr.push(item)
                    }
                    this.$nextTick(() => {
                    //dom更新了 可以调用better-scroll了
                        this.$refs.bscroll.initScroll();
                    })
                    //this.currentPage = this.currentPage+1;
                }
            })
        },
        load(){
            this.currentPage = this.currentPage+1;
            if(this.currentPage<=this.maxpage){
                let token = localStorage.getItem("access_token");
                let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"start_time":this.starttime,"end_time":this.endtime}
                this.ajaxplugin("/Deliver/finance",params,(res) => {
                    let arr = res.data.order_list
                    this.loadmore = false;
                    if(this.itemarr == ''){
                        this.itemarr = arr ; 
                    }else{
                        for(let item of arr){
                            this.itemarr.push(item)
                        }
                    }
                    // this.$nextTick(() => {
                    //   //dom更新了 可以调用better-scroll了
                    //   this.initScroll();
                    // })
                    //this.currentPage = this.currentPage+1;
                })
            }else{
                this.nomore = true;
                this.currentPage = 1;
            }
        }
    },
    watch:{
        start(){
           return this.starttime = this.start[0]+"-"+this.start[1]+"-"+this.start[2]
        },
        end(){
           return this.endtime = this.end[0]+"-"+this.end[1]+"-"+this.end[2]
        }
    }
}
</script>

<style lang="stylus">
.income
    .wrapper
        bottom 0 !important
    .search-click
        padding 10px
        background #fff
        margin-top 44px
        .row
            display flex
            .left
                flex 0 0 70%
                margin-right 15px
                background #f5f5f5
                border-radius 15px
                line-height 30px
                text-align center
            .right
                flex:auto
        h1
            margin-top 15px
    .margin-r-20
        margin-right 20px
    .margin-l-20
        margin-left 20px
    
    .income-list
        background #fff
        .item1
            padding 15px
            .left
                h1
                    line-height 25px
            .right
                flex 0 0 80px
                h1
                    line-height 40px

</style>